<template>
  <div class="addNew">
    <el-form :model="formInline" label-position="top" size="large">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商品名字">
            <el-input v-model="formInline.title" placeholder="商品名字" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收件人">
            <el-input v-model="formInline.au" placeholder="收件人" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="电话">
            <el-input v-model="formInline.phone" placeholder="电话" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址">
            <el-input v-model="formInline.address" placeholder="地址" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="数量">
            <el-input v-model="formInline.num" placeholder="数量" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价格">
            <el-input v-model="formInline.price" placeholder="价格" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单状态">
            <el-select v-model="formInline.state" placeholder="请选择状态">
              <el-option label="未付款" value="未付款"></el-option>
              <el-option label="已付款" value="已付款"></el-option>
              <el-option label="已发货" value="已发货"></el-option>
              <el-option label="已完成" value="已完成"></el-option>
              <el-option label="已取消" value="已取消"></el-option>
              <el-option label="已退款" value="已退款"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{
              filterNew ? '修改' : '添加'
            }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue'
import { addOrder, updateOrder } from '@/utils/zgf-axios.js'
const { filterNew } = defineProps(['filterNew'])
const emit = defineEmits(['handleDraewr'])

let timenow = new Date().toLocaleString('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false, // 使用 24 小时制
})
// 表单数据
const formInline = ref(
  filterNew || {
    title: '',
    publishedAt: timenow,
    uptime: timenow,
    phone: '',
    au: '',
    state: '',
    address: '',
    num: '',
    price: '',
  }
)
// 提交数据，添加博客信息
const onSubmit = async () => {
  const time = new Date().toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false, // 使用 24 小时制
  })
  const { title, phone, publishedAt, uptime, au, state, address, num, price } = formInline.value
  console.log('formInline.value', formInline.value)
  if (!filterNew) {
    console.log('addOrder submit!', formInline.value)
    await addOrder(title, publishedAt, uptime, phone, au, state, address, num, price).then()
    formInline.value = {
      title: '',
      phone: '',
      au: '',
      state: '',
      num: '',
      price: '',
      address: '',
      publishedAt: time,
      uptime: time,
    }
  } else {
    await updateOrder(
      filterNew._id,
      title,
      publishedAt,
      time,
      phone,
      au,
      state,
      address,
      num,
      price
    ).then()
    console.log('updateOrder submit!', formInline.value)
  }
  emit('handleDraewr')
  // window.location.reload()
}
</script>


<style lang="less" scoped>
.addNew {
  box-shadow: 0 0 0 0 #000;
  border-radius: 20rem;
  background-color: #fff;
  padding: 0;

  input {
    height: 60rem;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220rem;
}

.demo-form-inline .el-select {
  --el-select-width: 220rem;
}
</style>
